.
3 <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="referrer" content="no-referrer" />
    <title>文章详情</title>
    <link rel="stylesheet" href="../../icon/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/frame0/article.css">
    <style>
      .zan_icon.active{
        color: rgb(201, 22, 26);
      };
      .giftBag{
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */
      }
      header .right{
        vertical-align: top;
        font-size: 1.3rem;
        float: right;
      }
    </style>

</head>

<body style="position:relative">
    <div class="giftBag">
        <!-- 头部 -->
        <header style="z-index:999">
            <span class="iconfont icon-fanhui" onClick="closeWin()"></span>
            <span>文章详情</span>
            <span id="share_wx" onclick="share_wx();" class="iconfont icon-fenxiangdaozhuanfafasongzhiyuanquanxianxing right"></span>
        </header>
        <div id="contentBox">
        </div>
    </div>
    <script type="text/javascript" src="../../lib/zepto.js"></script>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/dns.js"></script>
    <script type="text/javascript" src="../../lib/artTemplate/template.js"></script>
    <script type="text/javascript" src='../../script/aui-toast.js'></script>
    <script type="text/html" id="commentList">

        <div class="content">
            <h5 class="title">{{title}}</h5>
            <div class="info">
                <span>{{create_time}}</span>
                <span></span>
                <span>浏览量：{{virtual_read_num+read_num}}</span>
            </div>
            <div class="content_l">
              {{#content}}
            </div>
            <div class="zan">
              {{if tid.is_awesome=="yes"}}
                <span class="iconfont icon-dianzan zan_icon active"></span><span class="like">{{virtual_awesome_num+awesome_num}}</span>
              {{/if}}
              {{if tid.is_awesome=="no"}}
                <span class="iconfont icon-dianzan zan_icon"></span><span class="like">{{virtual_awesome_num+awesome_num}}</span>
              {{/if}}
            </div>
        </div>
        <div class="comment">
          <h4>评论</h4>
            {{each comment_list.reverse() as value index}}
            <div class="comment_body">
              <div class="user_photo">
                <img src="{{comment_list[index].user.avatar.filepath}}" alt="">
              </div>
              <div class="user_message">
                <div class="user_name">{{comment_list[index].user.nickname}}</div>
                <div class="user_comment">{{#comment_list[index].content}}</div>
                <div class="date">
                  <span>{{comment_list[index].create_time}}</span>
                  <span></span>
                </div>
              </div>
            </div>
            {{/each}}
        </div>
    </script>
    <script>
      apiready = function() {
        getactiveList();
      }
      var toast = new auiToast({
          })
      function getactiveList() {
        var token = localStorage.getItem("token");
        var id = localStorage.getItem("articleID");
        console.log(id);
        $.ajax({
          type:"get",
          beforeSend: function(request) {
              request.setRequestHeader("token", token);
          },
          data:{
            id:id
          },
          url:dns+"news/read/id?id="+id,
          success:function(res) {
            // console.log(JSON.stringify(res));
            var list = res.data.comment_list;//所有评论列表-数组
            for(var i = 0; i< list.length;i++){
              var msg = list[i].content;//每一项评论
              list[i].content = transEmo(msg)//将转换过的表情img覆盖res中的content
            }
            // console.log(JSON.stringify(res));
            var html = template("commentList",res.data);
            document.getElementById("contentBox").innerHTML = html;
            // 适配video宽高
            var width = $("video").width();
            var height = width/16*9;
            $("video").height(height)
            // 开启评论框模块
            comment()
            $("video").css("width","100%").css("height","10rem").css("background-color","#000")
            $("img").each(function () {
              $(this).click(function () {
                var imgList = [];
                imgList.push($(this).attr("src"))
                var photoBrowser = api.require('photoBrowser');
                photoBrowser.open({
                    images: imgList,
                    placeholderImg: 'widget://res/img/apicloud.png',
                    bgColor: '#000',

                }, function(ret, err) {
                    if (ret.eventType == 'click') {
                        photoBrowser.close()
                    }
                    if (ret.eventType == 'longPress') {
                      var a = Math.floor(Math.random()*1000);
                      var retIndex = ret.index;
                      api.confirm({
                          title: "温馨提示",
                          msg: "是否保存图片?",
                          buttons: ["是", "否"]
                      }, function(ret, err) {
                          if (ret.buttonIndex == 1) { //确认退出
                            api.download({
                                url: imgList[retIndex],
                                savePath: 'fs://'+a+'.jpg',
                                report: true,
                                cache: false
                            }, function(ret, err) {
                                if (ret.state == 1) {
                                    //下载成功
                                    // console.log("下载成功");
                                    // 保存图片
                                    api.saveMediaToAlbum({
                                      path :ret.savePath
                                    }, function(ret, err) {
                                        if (ret.status==true) {
                                          alert("保存成功!")
                                        } else {
                                        }
                                    });
                                } else {

                                }
                            });
                          } else {
                              return;
                          }
                      });
                    }
                     else {
                        // alert(JSON.stringify(err));
                    }
                });
              })
            })
            // 点赞
            getdianzan();
          }
        })
      }
      // 点赞/取消点赞
      function getdianzan() {
        $(".zan").click(function () {
          // 获取此时的毫秒数
          var newTime = new Date();
          var getnewTime = newTime.getTime();
          // 获取登陆时的毫秒数
          var getloginTime = localStorage.getItem("getloginTime");
          var Time = getnewTime-getloginTime;
          var token = localStorage.getItem("token");
          var cacheTime = localStorage.getItem("cacheTime");
          if(Time>cacheTime||!token){
            api.confirm({
                title: "当前游客状态",
                msg: "需要前往登录页面,是否继续?",
                buttons: ["是", "否"]
            }, function(ret, err) {
              if(ret.buttonIndex == 1){
                toast.loading({
                        title:"跳转中",
                        duration:2000
                    },function(ret){
                        setTimeout(function(){
                            toast.hide();
                        }, 3000)
                    });
                setTimeout(function () {
                  api.openWin({
                      name: 'login',
                      url: '../system/login.html',
                      allowEdit: true,
                      pageParam: {}, //页面代参数
                      rect: {
                          x: 0,
                          y: 0,
                          w: api.winWidth,
                          h: api.winHeight
                      }
                  });
                },1000)
              }
            });
            return false;
          }
          var articleID = localStorage.getItem("articleID");
          var val = $(this).find(".like").text();
          var that = this;
            $.ajax({
              type:"post",
              data:{
                type:1,
                article:articleID
              },
              beforeSend:function (request) {
                request.setRequestHeader("token", token);
              },
              url:dns+"like/okorno",
              success:function(res){
                if(res.msg=="成功点赞"){
                  $(that).find(".zan_icon").addClass("active");
                  val++;
                  $(that).find(".like").text(val);
                  toast.custom({
                    title:"成功点赞!",
                    html:'<i class="aui-iconfont aui-icon-laud"></i>',
                    duration:1500
                  });
                  // 传递点赞状态
                  api.sendEvent({
                    name:"zan_reload",
                    extra: {
                      key1: val,
                      key2:'true'
                    }
                  })
                };
                if(res.msg=="取消点赞"){
                  $(that).find(".zan_icon").removeClass("active");
                  val--;
                  $(that).find(".like").text(val);
                  // 传递点赞状态
                  api.sendEvent({
                    name:"zan_reload",
                    extra: {
                      key1: val,
                      key2:'false'
                    }
                  })
                };
              }
            })
        })
      }
      function closeWin() {

        console.log("返回");
        api.closeWin()
      }
      function comment() {
        // 开启评论框
        var UIChatBox = api.require('UIChatBox');
        UIChatBox.open({
          placeholder: '说出你的想法~',
          maxRows: 4,
          emotionPath: 'widget://widget/image/emotion',
          texts: {
              recordBtn: {
                  normalTitle: '按住说话',
                  activeTitle: '松开结束'
              },
              sendBtn: {
                  title: 'send'
              }
          },
          styles: {
              inputBar: {
                  borderColor: '#d9d9d9',
                  bgColor: '#f2f2f2'
              },
              inputBox: {
                  borderColor: '#B3B3B3',
                  bgColor: '#FFFFFF'
              },
              emotionBtn: {     //笑脸
                  normalImg: '../../widget/image/face1.png'
              },
              keyboardBtn: {     //键盘
                  normalImg: '../../widget/image/key1.png'
              },
              // speechBtn: {     //语音
              //     normalImg: '../../widget/image/cam1.png'
              // },
              // recordBtn: {     //“按住 录音”按钮的样式
              //     normalBg: '#c4c4c4',
              //     activeBg: '#999999',
              //     color: '#000',//按钮标题文字的颜色
              //     size: 14
              // },
              indicator: {
                  target: 'emotionPanel',
                  color: '#c4c4c4',
                  activeColor: '#9e9e9e'
              },
              sendBtn: {
                  titleColor: '#fff',
                  bg: 'rgb(99, 149, 236)',
                  activeBg: 'rgb(99, 149, 236)',
                  titleSize: 14
              }
          }
      }, function(ret, err) {
        if(ret.eventType=="send"){
          // 获取此时的毫秒数
          var newTime = new Date();
          var getnewTime = newTime.getTime();
          // 获取登陆时的毫秒数
          var getloginTime = localStorage.getItem("getloginTime");
          var Time = getnewTime-getloginTime;
          var token = localStorage.getItem("token");
          var cacheTime = localStorage.getItem("cacheTime");
          if(Time>cacheTime||!token){
            api.confirm({
                title: "当前游客状态",
                msg: "需要前往登录页面,是否继续?",
                buttons: ["是", "否"]
            }, function(ret, err) {
              if(ret.buttonIndex == 1){
                toast.loading({
                        title:"跳转中",
                        duration:2000
                    },function(ret){
                        setTimeout(function(){
                            toast.hide();
                        }, 3000)
                    });
                setTimeout(function () {
                  api.openWin({
                      name: 'login',
                      url: '../system/login.html',
                      allowEdit: true,
                      pageParam: {}, //页面代参数
                      rect: {
                          x: 0,
                          y: 0,
                          w: api.winWidth,
                          h: api.winHeight
                      }
                  });
                },1000)
              }
            });
            return false;
          }
        }
          if (ret) {
              var msg = JSON.stringify(ret.msg);
              var msg = msg.substr(1,msg.length-2);
              var msg = msg.trim();
              var token = localStorage.getItem("token");
              var id = localStorage.getItem("articleID");
              if(msg==''){
                toast.fail({
                    title:"请输入您想评论的内容!",
                    duration:2000
                });
                return false;
              }
              // 发表评论
              $.ajax({
                type:"post",
                data:{
                  token:token,
                  content:msg,
                  type:1,
                  article:id
                },
                beforeSend: function(request) {
                    request.setRequestHeader("token", token);
                },
                url:dns+"comment/create",
                success:function(res){
                  // console.log(JSON.stringify(res));
                  var content = transEmo(res.data.content.content);
                  setTimeout(function () {
                    toast.success({
                      title:"评论成功!",
                      duration:2000
                    });
                  },500)
                  // 动态添加评论
                  var strVar="";
                  strVar += "<div class=\"comment_body\">";
                  strVar += "        <div class=\"user_photo\">";
                  strVar += "          <img src='"+res.data.user.avatar.filepath+"' alt=\"\">";
                  strVar += "        <\/div>";
                  strVar += "        <div class=\"user_message\">";
                  strVar += "          <div class=\"user_name\">"+res.data.user.nickname+"</div>";
                  strVar += "          <div class=\"user_comment\">"+content+"</div>";
                  strVar += "          <div class=\"date\">";
                  strVar += "            <span>"+res.data.content.time+"</span>";
                  strVar += "            <span><\/span>";
                  strVar += "          <\/div>";
                  strVar += "        <\/div>";
                  strVar += "      <\/div>";
                  $(".comment").append(strVar);
                  // 传递评论状态
                  api.sendEvent({
                    name:"comment_reload",
                    extra: {
                    }
                  })
                  // 收起键盘
                  var UIChatBox = api.require('UIChatBox');
                  UIChatBox.closeKeyboard();
                }
              })
          } else {
              alert(JSON.stringify(err));
          }
      });
      }


      //表情配置信息
      var emoData = [
          {"name": "Expression_1","text": "[微笑]"},
          {"name": "Expression_2","text": "[撇嘴]"},
          {"name": "Expression_3","text": "[色]"},
          {"name": "Expression_4","text": "[发呆]"},
          {"name": "Expression_5","text": "[得意]"},
          {"name": "Expression_6","text": "[流泪]"},
          {"name": "Expression_7","text": "[害羞]"},
          {"name": "Expression_8","text": "[闭嘴]"},
          {"name": "Expression_9","text": "[睡]"},
          {"name": "Expression_10","text": "[大哭]"},
          {"name": "Expression_11","text": "[尴尬]"},
          {"name": "Expression_12","text": "[发怒]"},
          {"name": "Expression_13","text": "[调皮]"},
          {"name": "Expression_14","text": "[呲牙]"},
          {"name": "Expression_15","text": "[惊讶]"},
          {"name": "Expression_16","text": "[难过]"},
          {"name": "Expression_17","text": "[酷]"},
          {"name": "Expression_18","text": "[冷汗]"},
          {"name": "Expression_19","text": "[抓狂]"},
          {"name": "Expression_20","text": "[吐]"},
          {"name": "Expression_21","text": "[偷笑]"},
          {"name": "Expression_22","text": "[愉快]"},
          {"name": "Expression_23","text": "[白眼]"},
          {"name": "Expression_24","text": "[傲慢]"},
          {"name": "Expression_25","text": "[饥饿]"},
          {"name": "Expression_26","text": "[困]"},
          {"name": "Expression_27","text": "[恐惧]"},
          {"name": "Expression_28","text": "[流汗]"},
          {"name": "Expression_29","text": "[憨笑]"},
          {"name": "Expression_30","text": "[悠闲]"},
          {"name": "Expression_31","text": "[奋斗]"},
          {"name": "Expression_32","text": "[咒骂]"},
          {"name": "Expression_33","text": "[疑问]"},
          {"name": "Expression_34","text": "[嘘]"},
          {"name": "Expression_35","text": "[晕]"},
          {"name": "Expression_36","text": "[疯了]"},
          {"name": "Expression_37","text": "[衰]"},
          {"name": "Expression_38","text": "[骷髅]"},
          {"name": "Expression_39","text": "[敲打]"},
          {"name": "Expression_40","text": "[再见]"},
          {"name": "Expression_41","text": "[擦汗]"},
          {"name": "Expression_42","text": "[抠鼻]"},
          {"name": "Expression_43","text": "[鼓掌]"},
          {"name": "Expression_44","text": "[糗大了]"},
          {"name": "Expression_45","text": "[坏笑]"},
          {"name": "Expression_46","text": "[左哼哼]"},
          {"name": "Expression_47","text": "[右哼哼]"},
          {"name": "Expression_48","text": "[哈欠]"},
          {"name": "Expression_49","text": "[鄙视]"},
          {"name": "Expression_50","text": "[委屈]"},
          {"name": "Expression_51","text": "[快哭了]"},
          {"name": "Expression_52","text": "[阴险]"},
          {"name": "Expression_53","text": "[亲亲]"},
          {"name": "Expression_54","text": "[吓]"},
          {"name": "Expression_55","text": "[可怜]"},
          {"name": "Expression_56","text": "[菜刀]"},
          {"name": "Expression_57","text": "[西瓜]"},
          {"name": "Expression_58","text": "[啤酒]"},
          {"name": "Expression_59","text": "[篮球]"},
          {"name": "Expression_60","text": "[乒乓]"},
          {"name": "Expression_61","text": "[咖啡]"},
          {"name": "Expression_62","text": "[饭]"},
          {"name": "Expression_63","text": "[猪头]"},
          {"name": "Expression_64","text": "[玫瑰]"},
          {"name": "Expression_65","text": "[凋谢]"},
          {"name": "Expression_66","text": "[嘴唇]"},
          {"name": "Expression_67","text": "[爱心]"},
          {"name": "Expression_68","text": "[心碎]"},
          {"name": "Expression_69","text": "[蛋糕]"},
          {"name": "Expression_70","text": "[闪电]"},
          {"name": "Expression_71","text": "[炸弹]"},
          {"name": "Expression_72","text": "[刀]"},
          {"name": "Expression_73","text": "[足球]"},
          {"name": "Expression_74","text": "[瓢虫]"},
          {"name": "Expression_75","text": "[便便]"},
          {"name": "Expression_76","text": "[月亮]"},
          {"name": "Expression_77","text": "[太阳]"},
          {"name": "Expression_78","text": "[礼物]"},
          {"name": "Expression_79","text": "[拥抱]"},
          {"name": "Expression_80","text": "[强]"},
          {"name": "Expression_81","text": "[弱]"},
          {"name": "Expression_82","text": "[握手]"},
          {"name": "Expression_83","text": "[胜利]"},
          {"name": "Expression_84","text": "[抱拳]"},
          {"name": "Expression_85","text": "[勾引]"},
          {"name": "Expression_86","text": "[拳头]"},
          {"name": "Expression_87","text": "[差劲]"},
          {"name": "Expression_88","text": "[爱你]"},
          {"name": "Expression_89","text": "[NO]"},
          {"name": "Expression_90","text": "[OK]"},
          {"name": "Expression_91","text": "[爱情]"},
          {"name": "Expression_92","text": "[飞吻]"},
          {"name": "Expression_93","text": "[跳跳]"},
          {"name": "Expression_94","text": "[发抖]"},
          {"name": "Expression_95","text": "[怄火]"},
          {"name": "Expression_96","text": "[转圈]"},
          {"name": "Expression_97","text": "[磕头]"},
          {"name": "Expression_98","text": "[回头]"},
          {"name": "Expression_99","text": "[跳绳]"},
          {"name": "Expression_100","text": "[投降]"},
          {"name": "Expression_101","text": "[激动]"},
          {"name": "Expression_102","text": "[街舞]"},
          {"name": "Expression_103","text": "[献吻]"},
          {"name": "Expression_104","text": "[左太极]"},
          {"name": "Expression_105","text": "[右太极]"}
      ];


      //文字表情转换
      function transEmo(emoMsg){
          var emoPath, transMsg;
                      var reg = /\[(.*?)\]/gm;
                      transMsg = emoMsg.replace(reg, function(match) {
                              for (var i = 0, len = emoData.length; i < len; i++) {
                                      if (emoData[i].text === match) {
                                              emoPath = '../../widget/image/emotion/' + emoData[i].name + '.png';
                                              return '<img width="20" height="20" style="vertical-align:text-bottom" src="' + emoPath + '" />'
                                      }
                              }
                              return match;
                      });
                      return transMsg;
      }
      //分享
      function share_wx () {
        // 获取此时的毫秒数
        var newTime = new Date();
        var getnewTime = newTime.getTime();
        // 获取登陆时的毫秒数
        var getloginTime = localStorage.getItem("getloginTime");
        var Time = getnewTime-getloginTime;
        var token = localStorage.getItem("token");
        var cacheTime = localStorage.getItem("cacheTime");
        if(Time>cacheTime||!token){
          api.confirm({
              title: "当前游客状态",
              msg: "需要前往登录页面,是否继续?",
              buttons: ["是", "否"]
          }, function(ret, err) {
            if(ret.buttonIndex == 1){
              toast.loading({
                      title:"跳转中",
                      duration:2000
                  },function(ret){
                      setTimeout(function(){
                          toast.hide();
                      }, 3000)
                  });
              setTimeout(function () {
                api.openWin({
                    name: 'login',
                    url: '../system/login.html',
                    allowEdit: true,
                    pageParam: {}, //页面代参数
                    rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                    }
                });
              },1000)
            }
          });
          return false;
        }
        $.ajax({
          type:"get",
          beforeSend:function (request) {
            request.setRequestHeader("token",token)
          },
          data:{
            action:2
          },
          url:dns+"user/add/integral",
          success:function(res){
          },
          error:function(err){
            console.log(JSON.parse(err.responseText).msg);
          }
        })
        var articleID = localStorage.getItem("articleID");
        var wx = api.require('wx');
          wx.isInstalled(function(ret, err) {
          if (ret.installed) {
            wx.shareWebpage({
                apiKey: 'wx99475b10511a3195',
                scene: 'timeline',
                // thumb: './codenew3.png',
                title: $('h5.title').html(),
                description: 'desc',
                // contentUrl: url + '/SXapp/html/frame0/article.html'
                contentUrl:'http://www.jinshouzhou.com/h5/html/index.html?id='+articleID
                }, function(ret, err) {
                    if (ret.status==true) {
                      toast.success({
                          title:"分享成功",
                          duration:1500
                      });
                    } else {
                        toast.fail({
                            title:"取消分享!",
                            duration:1500
                        });
                    }
                });

            } else {
              toast.fail({
                  title:"当前设备未安装微信客户端!",
                  duration:1500
              });
            }
          });
        }
    </script>
</body>
</html>
